<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>微信参数设置</title>
    <link rel="stylesheet" href="css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="js/vue221.js" th:src="@{/js/vue.js}"></script>
    <script src="js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">微信参数设置</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>设置</div>
        </div><!-- 页面头部 end -->

        <div class="main-content-body">
            <div class="view-order mb_20">
                <div class="view-item">
                   	设置微信公众号参数、微信小程序参数、微信支付参数、微信分享参数。微信分享图片大小建议：120*120px、大小不超过：10KB
                </div>
            </div>
            <div class="edit-form">
                <el-form :model="weixinparam" :rules="rules" ref="weixinForm" label-width="140px" class="demo-ruleForm">
                    <el-form-item label="公众号appId" prop="publicAppid">
                        <el-input v-model="weixinparam.publicAppid" placeholder="最多输入50字"></el-input>
                    </el-form-item>
                    <el-form-item label="公众号appSecret" prop="publicAppsecret">
                        <el-input v-model="weixinparam.publicAppsecret" placeholder="最多输入100字"></el-input>
                    </el-form-item>
                    <el-form-item label="小程序appId" prop="miniAppid">
                        <el-input v-model="weixinparam.miniAppid" placeholder="最多输入50字"></el-input>
                    </el-form-item>
                    <el-form-item label="小程序appSecret" prop="miniAppsecret">
                        <el-input v-model="weixinparam.miniAppsecret" placeholder="最多输入100字"></el-input>
                    </el-form-item>
                    <el-form-item label="微信分享标题" prop="shareTitle">
                        <el-input v-model="weixinparam.shareTitle" placeholder="最多输入50字"></el-input>
                    </el-form-item>
                    <el-form-item label="微信分享内容" prop="shareContent">
                        <el-input type="textarea" v-model="weixinparam.shareContent" placeholder="最多输入100字" :rows="3"></el-input>
                    </el-form-item>
                    <el-form-item label="微信分享图片">
                        <div class="upload-image-box" @click="dialogImageVisible = true" style="width:120px;height:120px;">
							<div v-show="uploadImage.imageUrl" class="upload-image">
								<img :src="uploadImage.imageUrl">
								<span class="upload-operate upload-operate-delect" @click.stop="handleRemove">点击删除</span>
							</div>
							<span v-show="!uploadImage.imageUrl" class="upload-button">
								<i class="el-icon-upload"></i>
								添加图片
							</span>
						</div>
                    </el-form-item>

                    <div class="edit-button-fixed">
                        <div class="edit-button z-yuan-butn">
                            <el-button type="primary" @click="submitForm('weixinForm')">确定</el-button>
                            <el-button @click="handelCancel()">取消</el-button>
                        </div>
                    </div>
                </el-form>
                
                <!-- 上传图片模态框 -->
				<el-dialog title="上传文件" :visible.sync="dialogImageVisible">
					<el-upload v-model="weixinparam.shareImg"
					  ref="upload"
					  action="/fastdfs/file/uploadFile"
					  :multiple=false 
					  :limit="1"
					  list-type="picture"
					  :file-list="uploadImage.fileList"
					  :on-success="dosuccess"
					  :on-remove="handleRemove"
					  :before-upload="beforeAvatarUpload">
					  <el-button size="medium">+&nbsp;点击选择图片</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传JPG/PNG/JPEG文件、图片大小建议：120*120px、大小不超过：10KB</div>
					</el-upload>
					<div slot="footer" class="dialog-footer">
					    <el-button @click="dialogImageVisible = false">确 定</el-button>
					</div>
				</el-dialog>
		        <!-- 上传图片模态框 end -->

            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            // form 表单数据
            weixinparam: [[${dto}]],
            dialogImageVisible: false,
            fileName:'',
         	// 上传图片数据
	        uploadImage: {
	        	imageUrl: '',
	        	fileList: []
	        },
            // form 表单验证规则
            rules: {
            	publicAppid: [
                    { required: true, message: '请输入Appid', trigger: 'blur' },
                    { max: 50, message: '最多50个字符', trigger: 'blur' }
                ],
                publicAppsecret: [
                    { required: true, message: '请输入Appsecret', trigger: 'blur' },
                    { max: 100, message: '最多100个字符', trigger: 'blur' }
                ],
                miniAppid: [
                	{ required: true, message: '请输入Appid', trigger: 'blur' },
                    { max: 50, message: '最多50个字符', trigger: 'blur' }
                ],
                miniAppsecret: [
                    { required: true, message: '请输入Appsecret', trigger: 'blur' },
                    { max: 100, message: '最多100个字符', trigger: 'blur' }
                ],
                shareTitle: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { max: 50, message: '最多50个字符', trigger: 'blur' }
                ],
                shareContent: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                    { max: 100, message: '最多100个字符', trigger: 'blur' }
                ]
            }
        },
        computed: {

        },
        methods: {
            // 提交表单
            submitForm(formName) {
                let self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        $.ajax({
                            url: "/backstage/basicdata/weixinparam/setting",
                            type: "POST",
                            data: JSON.stringify(self.weixinparam),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        showClose: true,
                                        duration: 1500,
                                        message: '保存成功',
                                        type: 'success',
                                        customClass: 'message-center'
                                    });
                                } else {
                                    self.$message({
                                        showClose: true,
                                        duration: 1500,
                                        message: '保存失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                    self.loading = false;
                                }
                            },
                            error: function () {
                                self.$message({
                                    showClose: true,
                                    duration: 1500,
                                    message: '系统异常，请联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                                self.loading = false;
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            beforeAvatarUpload(file) {
            	const isJPG = (file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png');
       	        const isLt2M = file.size / 1024 < 10;
       	        if (!isJPG) {
       	        	this.$message({
       	        		showClose: true,	
	                    message: '图片只能是 JPG/JPEG/PNG 格式!',
	                    type: 'error',
	                    customClass: 'message-center',
                   });
       	        }
       	        if (!isLt2M) {
       	        	this.$message({
       	        		showClose: true,
       	        		message: '图片大小不能超过 10KB!',
                        type: 'error',
                        customClass: 'message-center',
                      });
       	        }
       	        return isJPG && isLt2M;
     	    },
        	dosuccess:function(response, file, fileList){
        		this.weixinparam.shareImg = response.fdfsIpPre + response.fullPath;
        		this.fileName = file.name;
        		this.uploadImage.imageUrl = response.fdfsIpPre + response.fullPath;
        	},
        	handleRemove:function(file, fileList){
        		var self = this;
   			 	$.post("/fastdfs/file/deleteFile",
			    	{"fullPath":this.weixinparam.shareImg},
				    function(data) {	
			    		var obj = eval('(' + data + ')');
						if(obj.returnCode){
							self.weixinparam.shareImg = "";
							self.uploadImage.imageUrl = "";
							self.uploadImage.fileList=[];
			            }
				    }
				);
        	},
            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 取消
            handelCancel() {
                history.back(-1);
            }
        }
    });
</script>
</html>
